<!-- 品质信息项详情 -->
<script lang="jsx" setup>
import dayjs from 'dayjs';
import { ref, watch } from 'vue';
import { Empty } from 'ant-design-vue';

const simpleImage = Empty.PRESENTED_IMAGE_DEFAULT;

const props = defineProps({
  title: {
    type: String,
    default: ''
  }
});

const tabTitle = ref(props.title);

watch(
  () => props.title,
  val => {
    tabTitle.value = val;
  }
);

const list = defineModel('list', { type: Array, default: () => [] });
const data = defineModel('data', { type: Array, default: () => [] });

console.log('list', list);

console.log('data', data);
function isTime(key) {
  if (key.includes('Time') || key.includes('time') || key.includes('Date') || key.includes('date')) {
    return true;
  }
}

const activeKey = ref(0);
</script>

<template>
  <div class="quality-information-item-tab h-full w-full">
    <ATabs v-if="data.length" v-model:activeKey="activeKey" class="h-full w-full">
      <ATabPane v-for="(tab, index) in data" :key="index" :tab="`${tabTitle}记录${index + 1}`">
        <div class="quality-information-item-detail h-full w-full">
          <div class="item">
            <div class="label">单号</div>
            <div class="value">{{ tab.serialNum }}</div>
          </div>
          <div v-for="(item, idx) in list" :key="idx" class="item">
            <div class="label">{{ item.title }}</div>
            <div class="value">
              <!-- {{ item.key }} -->
              <template v-if="isTime(item.key)">
                {{ tab?.[item.key] && dayjs(tab[item.key]).format('YYYY-MM-DD HH:mm:ss') }}
              </template>
              <template v-else>
                <template v-if="item.key == 'shiftType'">
                  {{ ['白班', '夜班'][tab?.[item.key]] || '' }}
                </template>
                <template v-else>
                  {{ tab?.[item.key] }}
                </template>
              </template>
            </div>
          </div>
        </div>
      </ATabPane>
    </ATabs>
    <div v-else class="no-data h-full w-full flex-center">
      <AEmpty :image="simpleImage" :description="`暂无${tabTitle}数据`" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.quality-information-item-tab {
  :deep(.ant-tabs) {
    .ant-tabs-nav {
      margin-bottom: 0;
    }
    .ant-tabs-content-holder {
      height: calc(100% - 40px);
      .ant-tabs-content {
        height: 100%;
        .ant-tabs-tabpane {
          height: 100%;
        }
      }
    }
  }
}

.quality-information-item-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  overflow-y: auto;
  padding-top: 15px;
  .item {
    width: calc(50% - 10px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 14px;
    flex-grow: 1;
    .label {
      color: #aeaeae;
      font-weight: bold;

      &::after {
        content: ':';
        margin: 0 3px;
      }
    }
    .value {
      flex: 1;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}
</style>
